import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  Button,
  StyleSheet,
  TouchableOpacity,
  Dimensions,
} from 'react-native';

import type {BottomTabNavigationProp} from '@react-navigation/bottom-tabs';

import {useAuthProvider} from '../../../hooks/useAuthProvider';
import {BottomTabParamList, RootStackParamList} from '../../Nav/routes';
import {
  primaryBackgroundColor,
  primaryBackgroundColor2,
  primaryColor,
  primaryColor2,
  primaryColor3,
  primaryHeaderBackgroundColor,
} from '../../../theme/default';
import RightIcon from '../../../assets/icons/right.svg';
import {useTranslation} from 'react-i18next';
import {useMyProfile} from '../../../hooks/useMyProfile';
import {useIsFocused, useNavigation} from '@react-navigation/native';
import {NativeStackNavigationProp} from '@react-navigation/native-stack';
import Config from 'react-native-config';

type MyScreenNavigationProp = BottomTabNavigationProp<BottomTabParamList, 'My'>;

type Props = {
  navigation: MyScreenNavigationProp;
};

const {width} = Dimensions.get('window');

function Staking({navigation}: Readonly<Props>) {
  const isFocused = useIsFocused();
  const {logout} = useAuthProvider();
  const [loading, setLoading] = useState<boolean>(true);
  const [userTotalNumber, setUserTotalNumber] = useState<Number>(0);
  const [cardTotalNumber, setCardTotalNumber] = useState<Number>(0);
  const {t} = useTranslation();
  const {getUserTotalNumber, getCardTotalNumber} = useMyProfile();

  const navigation2 =
    useNavigation<NativeStackNavigationProp<RootStackParamList>>();

  useEffect(() => {
    const getTotalNumber = async () => {
      setLoading(true);
      const userTotalNumber = await getUserTotalNumber();
      const cardTotalNumber = await getCardTotalNumber();
      setUserTotalNumber(userTotalNumber);
      setCardTotalNumber(cardTotalNumber);
      setLoading(false);
    };
    if (isFocused) {
      getTotalNumber();
    }
  }, [isFocused]);

  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        backgroundColor: primaryBackgroundColor,
      }}>
      <View style={styles.container}>
        <TouchableOpacity
          onPress={() => {
            navigation2.navigate('ManageWallet');
          }}
          style={{...styles.item, ...styles.itemBorder}}>
          <View style={styles.itemContent}>
            <Text style={{color: primaryColor2, fontSize: 15, marginBottom: 4}}>
              {t('mngWallets')}
            </Text>
            <Text style={{color: primaryColor3, fontSize: 12}}>
              {t('totalAccounts', {total: userTotalNumber})}
            </Text>
          </View>
          <View style={styles.itemRightButton}>
            <RightIcon width={20} height={20} color={primaryColor}></RightIcon>
          </View>
        </TouchableOpacity>

        <TouchableOpacity
          style={{...styles.item}}
          onPress={() => {
            navigation2.navigate('CardList');
          }}>
          <View style={styles.itemContent}>
            <Text style={{color: primaryColor2, fontSize: 15, marginBottom: 4}}>
              {t('mngCards')}
            </Text>
            <Text style={{color: primaryColor3, fontSize: 12}}>
              {t('totalCards', {total: cardTotalNumber})}
            </Text>
          </View>
          <View style={styles.itemRightButton}>
            <RightIcon width={20} height={20} color={primaryColor}></RightIcon>
          </View>
        </TouchableOpacity>
      </View>
      <View style={styles.container}>
        <View style={{...styles.itemCommon}}>
          <Text style={{color: primaryColor2, fontSize: 15}}>Solana</Text>
          <Text style={{color: primaryColor2, fontSize: 15, fontWeight: '600'}}>
            {Config.APP_MODE == 'prod' ? 'Mainnet' : 'Devnet'}
          </Text>
        </View>
      </View>

      <View style={styles.container}>
        <TouchableOpacity
          style={{...styles.itemCommon}}
          onPress={() => {
            navigation2.navigate('About');
          }}>
          <Text style={{color: primaryColor2, fontSize: 15}}>
            {t('aboutUs')}
          </Text>
        </TouchableOpacity>
      </View>
      <View style={styles.logoutButtonContainer}>
        <TouchableOpacity
          style={styles.logoutButton}
          onPress={async () => {
            await logout();
          }}>
          <Text style={{fontSize: 15, color: primaryColor, fontWeight: '600'}}>
            {t('logoutTitle')}
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

export default Staking;

const styles = StyleSheet.create({
  container: {
    width: '100%',
    marginTop: 24,
    paddingLeft: 16,
    justifyContent: 'flex-end',
    backgroundColor: primaryBackgroundColor2,
  },
  item: {
    width: width - 16,
    justifyContent: 'space-between',
    alignItems: 'center',
    height: 60,
    paddingRight: 16,
    flexDirection: 'row',
    backgroundColor: primaryBackgroundColor2,
  },
  itemCommon: {
    width: width - 16,
    justifyContent: 'space-between',
    alignItems: 'center',
    height: 48,
    paddingRight: 16,
    flexDirection: 'row',
    backgroundColor: primaryBackgroundColor2,
  },
  itemBorder: {
    borderBottomColor: primaryHeaderBackgroundColor,
    borderBottomWidth: 1,
  },
  itemContent: {
    flex: 1,
    alignItems: 'flex-start',
    justifyContent: 'center',
    height: '100%',
  },
  itemRightButton: {
    width: 48,
    justifyContent: 'center',
    alignItems: 'flex-end',
  },
  logoutButtonContainer: {
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 64,
  },
  logoutButton: {
    width: width - 64,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 1,
    backgroundColor: primaryHeaderBackgroundColor,
    borderColor: primaryColor,
    borderRadius: 16,
    paddingVertical: 12,
  },
});
